<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <!-- <el-input @keyup.enter.native="handleFilter" v-model="listQuery.nickName" style="width: 200px;" class="filter-item" placeholder="商品类别" >
      </el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button> -->
      <el-button class="filter-item" style="margin-left: 10px;" @click="dialog.add = true" v-waves type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
     
    </div>
    <!-- table 表格 -->
    <el-table  :data="list" v-loading="loading.list" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column  label="序号" prop='index' />
      <el-table-column  label="时间段" prop='ctime'>
        <template slot-scope="scope">
          {{scope.row.startTime | getTimeHMS}} - {{scope.row.endTime | getTimeHMS}}
        </template>
      </el-table-column>
      <el-table-column  label="收费金额" prop='rechargePrice'/>
      <el-table-column  label="操作" prop='financeType'>
        <template slot-scope="scope">
           <el-button  size="mini" v-waves type="danger" @click="deleteRecharge(scope.row.rechargeId)" >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
   
    <!-- pagination 分页 -->
    <!-- <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
      </el-pagination>
    </div> -->
    <!-- dialog 新增弹框 -->
    <el-dialog title="新增时间规则" :visible.sync="dialog.add">
      <el-form :model="addQuery" ref="addForm" label-position="right" label-width="120px" style='width: 400px; margin-left:50px;'>
         
        <el-form-item label="金额" prop='price' :rules="[
      { required: true, message: '金额不能为空'},
    ]">   <el-input-number :precision='1' style='width:100%' :step='1' v-model="addQuery.price"  :min="1" ></el-input-number>
          
        </el-form-item>
        <el-form-item label="开始时间" prop='startTime' :rules="[
      { required: true, message: '请选择开始时间'},
    ]">
          <el-time-picker
           clearable
            style="width:100%"
            v-model="addQuery.startTime"
            placeholder="任意时间点">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop='endTime' :rules="[
      { required: true, message: '请选择结束时间'},
    ]">
          <el-time-picker
            style="width:100%"
            v-model="addQuery.endTime"
            clearable
            placeholder="任意时间点">
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.add = false">取消</el-button>
        <el-button type="primary" @click="add" :loading="loading.add">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { rechargeList, addRecharge, deleteRecharge } from '@/api/time'
import { getTimeHMS } from '@/filters';
export default {
  name: 'datetime',
  data() {
    return {
      value2: '',
      total: 0,
      dialog: {
        add: false
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        userPhone: ''
      },
      addQuery: {
        startTime: '',
        endTime: '',
        price: ''
      },
      list: null,
      loading: {
        list: false,
        add: false
      }
    }
  },
  filters: {
    // startTimeOriginValue 开始时间原点值 
    // endTimeOriginValue  结束时间原点值
    type (t) {
      const types = ['充值', '共享订单', '商城订单', '押金缴纳', '押金退款']
      return types[t+1]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading.list = true
      try {
        const { data } = await rechargeList()
        this.list = data.list.map((item, index) => ({index: index + 1, ...item}))
        this.total = data.total
      } catch (error) {
        
      }
      this.loading.list = false
     
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    async add () {
      this.$refs['addForm'].validate(async (valid) => {
        if (valid) {
          this.loading.add = true
          this.addQuery.startTime = `1970-01-01 ${getTimeHMS(this.addQuery.startTime)}`
          this.addQuery.endTime = `1970-01-01 ${getTimeHMS(this.addQuery.endTime)}`
          try {
            const { data } = await addRecharge(this.addQuery)
            
            this.$refs['addForm'].resetFields();
            this.$message.success('新增成功')
            setTimeout(() => {
              
              this.getList()
            }, 1200);
          } catch (error) {
            
          }
          this.dialog.add = false
        } else {
         
          return false;
        }
      }); 
    },
    async deleteRecharge (rechargeId) {
      const { data } = await deleteRecharge({rechargeId})
      this.getList()
      this.$message.success('删除成功')
    }
  }
}
</script>
